<template>
  <t-layout-one class="layout-one-demo">
    <!--  搜索栏  -->
    <el-row class="search-bar" slot="up">
      <el-form :inline="true" :model="queryForm" class="demo-form-inline">
        <el-form-item label="参数代码">
          <el-input v-model="queryForm.paramCode" placeholder="参数代码" clearable></el-input>
        </el-form-item>
        <el-form-item label="参数名称">
          <el-input v-model="queryForm.paramName" placeholder="参数名称" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <!--  工具栏  -->
    <el-row slot="toolbar">
      <el-col :span="12">
        <el-button type="primary" icon="el-icon-edit-outline" @click="isAddDrawer=true">添加</el-button>
        <el-button type="primary" icon="el-icon-edit" :disabled="selectRows.length!=1" @click="isEditDrawer=true">编辑
        </el-button>
        <el-popconfirm style="margin: 0px 10px"
            @confirm="onDelete"
            confirm-button-text='确认'
            cancel-button-text='取消'
            icon="el-icon-info"
            icon-color="red"
            title="确认删除选中的记录？">
          <el-button :disabled="selectRows==0" slot="reference" type="danger" icon="el-icon-delete">删除</el-button>
        </el-popconfirm>
        <el-button icon="el-icon-refresh" @click="search">刷新</el-button>
      </el-col>
    </el-row>
    <!--  表格  -->
    <t-table-with-pagination :data="[]" url="/sys/params/query/page"
                             ref="tableList" :query-params="queryForm"
                             @checkbox-all="obj=>selectRows = obj.records"
                             @checkbox-change="obj=>selectRows = obj.records">
      <vxe-column type="checkbox" width="60" key="checkbox"></vxe-column>
      <vxe-column type="seq" width="60"></vxe-column>
      <vxe-column field="paramCode" title="参数代码" width="300"></vxe-column>
      <vxe-column field="paramName" title="参数名称" width="300"></vxe-column>
      <vxe-column field="paramValue" title="参数值" width="300"></vxe-column>
      <vxe-column field="remark" title="描述"></vxe-column>
      <vxe-column field="createTime" width="180" title="创建时间"></vxe-column>
      <vxe-column field="updateTime" width="180" title="编辑时间"></vxe-column>
    </t-table-with-pagination>

    <!--  抽屉  -->
    <add-from :visible="isAddDrawer" @close="isAddDrawer = false" @saveSuccess="refreshTable"></add-from>
    <edit-from :visible="isEditDrawer" @close="isEditDrawer = false" @saveSuccess="refreshTable"
               :row-data="selectRows[0]"></edit-from>
  </t-layout-one>
</template>

<script>var selectRows;

import addFrom from "./part/addFrom";
import editFrom from "./part/editFrom";
import request from "../../../../utils/request";

export default {
  components: {addFrom, editFrom},
  data() {
    return {
      isAddDrawer: false,
      isEditDrawer: false,
      queryForm: {
        paramCode: null,
        paramName: null
      },
      selectRows: []
    }
  },
  methods: {
    refreshTable() {
      this.$refs['tableList'].loadTableData()
      this.selectRows = []
    },
    search() {
      this.$refs['tableList'].loadTableData()
    },
    onDelete() {
      const deleteIds = this.selectRows.map(item => {
        return item.id
      }).join(",")
      request({
        url: `/sys/params/deleteByIds`,
        data: {ids: deleteIds},
        method: 'delete',
      }).then(data => {
        this.$message({
          message: '删除成功',
          type: 'success'
        });
        this.refreshTable()
      })
    },
  },
  mounted() {
    this.refreshTable()
  }
}
</script>

<style lang="less" scoped>
.search-bar {
  /deep/ .el-form-item--small.el-form-item {
    margin-bottom: 8px;
  }
}
</style>